<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <style>
        .btn{
            display: inline-block;
            width: 80px;
            border-radius: 10px;
            border-color: transparent;
            float: left;
        }

        .btn-success{
            background-color:greenyellow ;
        }

        .btn-success:hover{
            background-color: #ffe03f;
        }
        .btn-danger{
            background-color: red;
        }

        .btn-danger:hover{
            background-color: #ff7f90;
        }

        .btn-primary{
            background-color: blue;
        }

        .btn-primary:hover{
            background-color: #57a9ff;
        }


        .btn:first-child{
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
          }

        .btn:last-child{
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .btn:not(:first-child):not(:last-child){
            border-radius: 0;
        }
    </style>
</head>
<body>

<button class="btn btn-success">按钮1</button>
<button class="btn btn-danger">按钮2</button>
<button class="btn btn-primary">按钮3</button>



</body>
</html>